<template>
  <div id="food-manage">
    <ContentField>
      <template v-slot:content-field-card-name>菜品管理</template>
      <template v-slot:content-field-card-button>
        <el-button type="success" round @click="addFoodBtnClick">
          增添菜品
        </el-button>
      </template>
      <template v-slot:content-field-card-body>
        <div id="food-manage-body" style="position: relative">
          <el-table
            :data="food_list"
            border
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="name" label="菜品名" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="foodStyleStr" label="类型" />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  type="primary"
                  :icon="Edit"
                  circle
                  @click="editFoodBtnClick(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  :icon="Delete"
                  circle
                  @click="deleteFoodBtnClick(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
    <!-- 菜品信息添加dialog -->
    <el-dialog v-model="foodAddDialogVisible" title="添加菜品">
      <el-form
        label-position="right"
        label-width="100px"
        :model="curFood"
        style="max-width: 460px"
      >
        <el-form-item label="名称">
          <el-input v-model="curFood.name" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="curFood.price" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="curFood.food_style_id" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="foodAddDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="foodAddDialogSubBtnClick">
            提交修改
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 菜品信息编辑dialog -->
    <el-dialog v-model="foodEditDialogVisible" title="编辑菜品">
      <el-form
        label-position="right"
        label-width="100px"
        :model="curFood"
        style="max-width: 460px"
      >
        <el-form-item label="名称">
          <el-input v-model="curFood.name" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="curFood.price" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="curFood.food_style_id" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="foodEditDialogSubBtnClick">
        提交修改
      </el-button>
      <el-button @click="foodEditDialogVisible = false">取消</el-button>
      <el-divider />
      <div>
        <el-row :gutter="20">
          <el-col :span="10"><div>菜品对应的原材料：</div></el-col>
          <el-col :span="10"
            ><el-button type="primary" @click="addFoodMaterialBtnClick">
              添加对应的食材
            </el-button></el-col
          >
        </el-row>
      </div>
      <el-table :data="cur_food_material_list" border style="padding-top: 3vh">
        <el-table-column prop="materialName" label="食材名" />
        <el-table-column prop="materialNum" label="所需食材量" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="editFoodMaterialBtnClick(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              :icon="Delete"
              circle
              @click="deleteFoodMaterialBtnClick(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 菜品-食材关系信息编辑dialog -->
    <el-dialog
      v-model="foodMaterialEditDialogVisible"
      title="编辑菜品-食材关系"
    >
      <el-form
        label-position="right"
        label-width="100px"
        style="max-width: 460px"
      >
        <el-form-item label="菜品名称">
          <el-input v-model="curFood.name" disabled />
        </el-form-item>
        <el-form-item label="食材名称">
          <el-select
            v-model="curFoodMaterial.material_id"
            class="m-2"
            placeholder="Select"
          >
            <el-option
              v-for="item in material_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="食材数量">
          <el-input v-model="curFoodMaterial.material_num" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="foodMaterialEditSubBtnClick">
        提交修改
      </el-button>
      <el-button @click="foodMaterialEditDialogVisible = false">取消</el-button>
    </el-dialog>

    <!-- 菜品-食材关系信息添加dialog -->
    <el-dialog v-model="foodMaterialAddDialogVisible" title="添加菜品-食材关系">
      <el-form
        label-position="right"
        label-width="100px"
        style="max-width: 460px"
      >
        <el-form-item label="菜品名称">
          <el-input v-model="curFood.name" disabled />
        </el-form-item>
        <el-form-item label="食材名称">
          <el-select
            v-model="curFoodMaterial.material_id"
            class="m-2"
            placeholder="Select"
          >
            <el-option
              v-for="item in material_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="食材数量">
          <el-input v-model="curFoodMaterial.material_num" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="foodMaterialAddSubBtnClick">
        提交修改
      </el-button>
      <el-button @click="foodMaterialAddDialogVisible = false">取消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed, ref, reactive } from "vue";
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();

    store.dispatch("get_all_food_1", {
      token: store.state.user.jwt_token,
    });

    store.dispatch("get_all_food_style", {
      form: {
        token: store.state.user.jwt_token,
      },
    });

    store.dispatch("get_all_food_material", {
      token: store.state.user.jwt_token,
    });

    store.dispatch("get_all_material", {
      token: store.state.user.jwt_token,
    });

    let foodEditDialogVisible = ref(false);
    let foodAddDialogVisible = ref(false);
    let foodMaterialEditDialogVisible = ref(false);
    let foodMaterialAddDialogVisible = ref(false);
    let curFood = reactive({});

    let food_style_list = computed(() => {
      return store.state.food_style.food_style_list;
    });

    let material_list = computed(() => {
      return store.state.material.material_list;
    });

    let food_list = computed(() => {
      let res = [];
      store.state.food.food_list.forEach((food) => {
        food_style_list.value.forEach((food_style) => {
          if (food.foodStyleId == food_style.id) {
            food.foodStyleStr = food_style.name;
          }
        });
        res.push(food);
      });
      return res;
    });

    let cur_food_material_list = computed(() => {
      return store.state.food_material.cur_food_material_list;
    });

    let bindCurFood = (food) => {
      curFood.id = food.id;
      curFood.name = food.name;
      curFood.food_style_id = food.foodStyleId;
      curFood.price = food.price;
    };

    let clearCurFood = () => {
      curFood.id = "";
      curFood.name = "";
      curFood.food_style_id = "";
      curFood.price = "";
    };

    let addFoodBtnClick = () => {
      clearCurFood();
      foodAddDialogVisible.value = true;
    };

    let deleteFoodBtnClick = (row) => {
      bindCurFood(row);
      store.dispatch("delete_food", {
        token: store.state.user.jwt_token,
        id: curFood.id,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "success",
              message: "菜品删除成功:",
              offset: 100,
            });
            store.dispatch("get_all_food_1", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "菜品删除失败: " + data.message,
              offset: 100,
            });
          }
        },
      });
    };

    let curFoodMaterialList = reactive([]);

    let bindCurFoodMaterialList = (fmList) => {
      curFoodMaterialList = reactive([]);
      fmList.forEach((element) => {
        curFoodMaterialList.push(element);
      });
    };

    let editFoodBtnClick = (row) => {
      bindCurFood(row);
      store.dispatch("get_food_material_list_by_food_id", {
        token: store.state.user.jwt_token,
        food_id: curFood.id,
        success(resp) {
          bindCurFoodMaterialList(resp);
        },
      });
      foodEditDialogVisible.value = true;
    };

    let foodEditDialogSubBtnClick = () => {
      store.dispatch("modify_food", {
        token: store.state.user.jwt_token,
        id: curFood.id,
        name: curFood.name,
        food_style_id: curFood.food_style_id,
        price: curFood.price,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "success",
              message: "菜品修改成功:",
              offset: 100,
            });
            store.dispatch("get_all_food_1", {
              token: store.state.user.jwt_token,
            });
            foodEditDialogVisible.value = false;
          } else {
            ElNotification.error({
              title: "Error",
              message: "菜品修改失败: " + data.message,
              offset: 100,
            });
          }
        },
      });
    };

    let foodAddDialogSubBtnClick = () => {
      store.dispatch("add_food", {
        token: store.state.user.jwt_token,
        id: curFood.id,
        name: curFood.name,
        food_style_id: curFood.food_style_id,
        price: curFood.price,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "success",
              message: "菜品添加成功:",
              offset: 100,
            });
            store.dispatch("get_all_food_1", {
              token: store.state.user.jwt_token,
            });
            foodAddDialogVisible.value = false;
          } else {
            ElNotification.error({
              title: "Error",
              message: "菜品添加失败: " + data.message,
              offset: 100,
            });
          }
        },
      });
    };

    let curFoodMaterial = reactive({});

    let addFoodMaterialBtnClick = () => {
      curFoodMaterial.material_id = "";
      curFoodMaterial.material_num = "";
      foodMaterialAddDialogVisible.value = true;
    };

    let bindCurFoodMaterial = (t) => {
      curFoodMaterial.id = t.id;
      curFoodMaterial.foodId = t.foodId;
      curFoodMaterial.food_id = t.foodId;
      curFoodMaterial.foodName = t.foodName;
      curFoodMaterial.food_name = t.foodName;
      curFoodMaterial.materialId = t.materialId;
      curFoodMaterial.material_id = t.materialId;
      curFoodMaterial.materialName = t.materialName;
      curFoodMaterial.material_name = t.materialName;
      curFoodMaterial.materialNum = t.materialNum;
      curFoodMaterial.material_num = t.materialNum;
    };

    let deleteFoodMaterialBtnClick = (row) => {
      bindCurFoodMaterial(row);
      store.dispatch("delete_food_material", {
        token: store.state.user.jwt_token,
        ...curFoodMaterial,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "success",
              message: "菜品-食材关系删除成功",
              offset: 100,
            });
            store.dispatch("get_food_material_list_by_food_id", {
              token: store.state.user.jwt_token,
              food_id: curFood.id,
              success(resp) {
                bindCurFoodMaterialList(resp);
              },
            });
          } else {
            ElNotification.error({
              title: "error",
              message: "菜品-食材关系删除失败" + data.message,
              offset: 100,
            });
          }
        },
      });
    };

    let editFoodMaterialBtnClick = (row) => {
      bindCurFoodMaterial(row);
      foodMaterialEditDialogVisible.value = true;
    };

    let foodMaterialEditSubBtnClick = () => {
      store.dispatch("modify_food_material", {
        token: store.state.user.jwt_token,
        ...curFoodMaterial,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "success",
              message: "菜品-食材关系修改成功:",
              offset: 100,
            });
            store.dispatch("get_food_material_list_by_food_id", {
              token: store.state.user.jwt_token,
              food_id: curFood.id,
              success(resp) {
                bindCurFoodMaterialList(resp);
              },
            });
            foodMaterialEditDialogVisible.value = false;
          } else {
            ElNotification.error({
              title: "error",
              message: "菜品-食材关系修改失败:" + data.message,
              offset: 100,
            });
          }
        },
      });
    };

    let foodMaterialAddSubBtnClick = () => {
      console.log(curFoodMaterial);
      store.dispatch("add_food_material", {
        token: store.state.user.jwt_token,
        ...curFoodMaterial,
        food_id: curFood.id,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "success",
              message: "菜品-食材关系添加成功:",
              offset: 100,
            });
            store.dispatch("get_food_material_list_by_food_id", {
              token: store.state.user.jwt_token,
              food_id: curFood.id,
              success(resp) {
                bindCurFoodMaterialList(resp);
              },
            });
            foodMaterialAddDialogVisible.value = false;
          } else {
            ElNotification.error({
              title: "error",
              message: "菜品-食材关系添加失败:" + data.message,
              offset: 100,
            });
          }
        },
      });
    };

    return {
      foodMaterialEditDialogVisible,
      foodMaterialAddDialogVisible,
      addFoodBtnClick,
      editFoodBtnClick,
      deleteFoodBtnClick,
      food_list,
      Delete,
      Edit,
      foodEditDialogVisible,
      foodAddDialogVisible,
      curFood,
      foodEditDialogSubBtnClick,
      foodAddDialogSubBtnClick,
      deleteFoodMaterialBtnClick,
      addFoodMaterialBtnClick,
      curFoodMaterialList,
      cur_food_material_list,
      editFoodMaterialBtnClick,
      material_list,
      foodMaterialEditSubBtnClick,
      foodMaterialAddSubBtnClick,
      curFoodMaterial,
    };
  },
};
</script>

<style scoped></style>
